<template>
    <s-layout title="物流查询">
        <su-sticky bgColor="#fff">
            <uni-search-bar
                placeholder="搜索关键字"
                radius="27"
                @confirm="search"
                @cancel="cancel"
            />
        </su-sticky>
        <view class="content">
            <view class="card" v-for="item in state.list" :key="item.id" @click="gotoDetail(item)">
                <view class="card-top">
                    <view class="sys-no"
                        >系统编号 {{ item.express_no
                        }}<image src="@/static/copy.png" class="copy" @click="copyAddr(item.express_no)"></image
                    ></view>
                    <!-- <view class="time">{{item.time}}</view> -->
                </view>
                <view class="card-btm">
                    <view class="addr">
                        <view class="addr-top">
                            {{ item.goods_title }}
                        </view>
                        <!-- <view class="addr-btm"
                            ><image src="@/static/address.png" class="address"></image
                            >{{ item.express_no }}</view
                        > -->
                    </view>
                    <view class="btn" @click.stop="showLogistics(item.list, item.express_no)">点击查看物流&gt;&gt;</view>
                    <zfl-logistics :list="item.stepsList" v-if="item.isShow"></zfl-logistics>
                </view>
            </view>
        </view>

        <uni-load-more
            v-if="state.list.length > 0"
            :status="state.loadStatus"
            :content-text="{
                contentdown: '上拉加载更多',
            }"
            @tap="loadmore"
        />
        <s-empty v-if="state.list.length === 0" icon="/static/no-data.png" text="暂无查询信息">
        </s-empty>
    </s-layout>
</template>

<script setup>
    import { reactive } from 'vue';
    import { onLoad, onReachBottom } from '@dcloudio/uni-app';
    import sheep from '@/sheep';
    import {copyText} from '@/sheep/helper/index';

    const state = reactive({
        keyword: '',
        list: [],
        page: 1,
        pageSize: 20,
        loadStatus: 'noMore',
    });

    function toAddMember() {
        sheep.$router.go('/manage/pages/member/add');
    }

    function toDetail(id) {
        sheep.$router.go('/manage/pages/member/detail', { id });
    }

    function search(e) {
        state.keyword = e.value;
        emptyList();
        getList();
    }
    
    function cancel() {
        state.keyword = '';
        emptyList();
        getList();
    }
    
    function copyAddr(addr){
        copyText(addr)
    }

    function gotoDetail(item) {
        uni.navigateTo({
            url: `/pages/user/logistics/detail?item=${JSON.stringify(item)}`
        });
    }
    
    function showLogistics(list, express_no) {
        state.list.forEach((item) => {
            if (item.express_no == express_no) {
                item.stepsList = list.map((item) => {
                    return {
                        status: item.content,
                        time: item.change_date,
                        description: ''
                    }
                })
                console.log('item.stepsList', item.isShow)
                item.isShow = !item.isShow
            }
        })
    }

    async function getList() {
        state.loadStatus = 'loading';
        const info = {
            keyword: state.keyword,
            p: state.page,
            pagesize: state.pageSize,
        };
        const res = await sheep.$api.material.getWllist(info);
        if (res.code === 1) {
            let newArr = res.data.map(item => {
                return {
                    express_name: item.express_name,
                    express_no: item.express_no,
                    goods_title: item.goods_title,
                    list: item.list,
                    order_id: item.order_id,
                    stepsList: [],
                    isShow: false
                }
            });
            let initArr = state.list ? state.list : [];
            const lastListNum = newArr.length;
            if (state.page == 1) {
                state.list = res.data;
            } else {
                state.list = initArr.concat(newArr);
            }
            if (lastListNum < state.pageSize) {
                state.loadStatus = 'noMore';
            } else {
                state.loadStatus = 'more';
            }
        }
    }

    function emptyList() {
        state.page = 1;
        state.list = [];
        state.loadStatus = 'noMore';
    }

    // 加载更多
    function loadmore() {
        if (state.loadStatus !== 'noMore') {
            state.page++;
            getList();
        }
    }

    // 上拉加载更多
    onReachBottom(() => {
        loadmore();
    });

    onLoad((options) => {
        getList();
    });
</script>

<style lang="scss" scoped>
    .content {
        padding: 28rpx;

        .card {
            display: flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 24rpx;
            padding: 20rpx;
            margin-bottom: 24rpx;
            .card-top {
                padding: 10rpx;
                color: #666;
                font-size: 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
                .sys-no {
                    display: flex;
                    align-items: center;
                }
                .copy {
                    margin-left: 10rpx;
                    width: 28rpx;
                    height: 28rpx;
                }
                .time {
                    color: #888;
                    font-size: 20rpx;
                }
            }
            .card-btm {
                margin-top: 10rpx;
                padding: 20rpx;
                font-size: 24rpx;
                border-radius: 24rpx;
                background-color: #f9fafe;
                .addr {
                    line-height: 1.5;
                    .addr-btm {
                        display: flex;
                        align-items: center;
                    }
                    .address {
                        width: 32rpx;
                        height: 32rpx;
                    }
                }
                .btn {
                    margin-top: 10rpx;
                }
            }
        }
    }
</style>
